import { useModel, history } from '@umijs/max'
import { Container, Content } from './styled'
import Sider from './Sider'
import Header from './Header'
import { Dropdown, Tabs } from 'antd'
import 'dayjs'
import '@antv/g2'
import { DownOutlined } from '@ant-design/icons'
import 'dayjs/locale/zh-cn'
import 'echarts'
import '@wangeditor/editor/dist/css/style.css'
import '@wangeditor/editor-for-react'
import '@wangeditor/editor'
import "@dnd-kit/core"
import "@dnd-kit/sortable"
import "@dnd-kit/utilities"
import "tdesign-react"

const Layout: React.FC = () => {
  const { tabs, activeTabKey, closeCurrentTab, closeOther, removeAll } = useModel('global')

  const onChange = (key: string) => {
    const params = sessionStorage.getItem(`__${key}_search`)
    sessionStorage.setItem('onTabClick', 'yes')
    history.push(`${key}${params || ''}`)
  }

  const items = [
    {key: 'closeCurrent', label: '关闭当前页'},
    {key: 'closeOther', label: '关闭其他'},
    {key: 'closeAll', label: '关闭全部'},
  ]

  const onClick = ({key}: {key: string}) => {
    switch (key) {
      case 'closeCurrent': closeCurrentTab(); break
      case 'closeOther': closeOther(); break
      case 'closeAll': removeAll(true); break
    }
  }

  return (
    <Container>
      <Sider />
      <Header />
      <Content>
        <Tabs
          activeKey={activeTabKey}
          onChange={key => onChange(key)}
          items={tabs}
          tabBarExtraContent={<Dropdown menu={{items, onClick}}><a>操作 <DownOutlined style={{fontSize: 12}} /></a></Dropdown>}
          // destroyInactiveTabPane
        />
      </Content>
    </Container>
  )
}

export default Layout
